<template>
  <div class="f-wrapper">
    <div v-show="!atPvg" class="f-menu--nav-btn">
      <div class="f-menu--nav-btn__content">
        <a href="http://10.6.240.63:9999/zongzhan"> 总站 </a>
      </div>
      <div
        :class="{ 'f-menu--nav-btn__content': true, active: !atSecondScreen }"
        @click="backToHome"
      >
        航线图
      </div>
      <div
        v-if="atSecondScreen"
        :class="{ 'f-menu--nav-btn__content': true, active: atSecondScreen }"
      >
        {{ currentContinental }}
      </div>
    </div>

    <div class="f-menu f-menu--left">
      <first-left v-if="!atSecondScreen"></first-left>
      <second-left v-else></second-left>
    </div>
    <div class="f-map__wrapper">
      <world-map
        :scale="mapState.currentScale"
        :origin="mapState.currentMid"
        ref="mapRef"
        @wheel:update="onWheelUpdate"
      >
        <flight-path
          v-for="(p, i) in mapState.currentArray"
          :key="'path-' + i"
          :coordinates="p.coordinates"
          :entry-exit="p.entryExit"
          :airbus="p.airbus"
          :pvg="p.pvg"
          :port-name="p.portName"
          :scale="mapState.currentScale"
        ></flight-path>
        <image
          v-show="atPvg ? c.name === 'PVG' : true"
          class="f-dest--icon"
          v-for="(c, j) in destCoords"
          :key="'dest-' + j"
          :width="imageSize"
          :height="imageSize"
          :x="c.coords[0]"
          :y="c.coords[1]"
          :xlink:href="c.icon"
          :style="imageStyle"
        >
        </image>
      </world-map>
    </div>
    <div class="f-menu f-menu--right">
      <first-right v-if="!atSecondScreen"></first-right>
      <second-right v-else></second-right>
    </div>
  </div>
</template>

<script>
import WorldMap from './WorldMap.ts';
import FirstLeft from './first/FirstLeft.vue';
import FirstRight from './first/FirstRight.vue';
import SecondLeft from './second/SecondLeft.vue';
import SecondRight from './second/SecondRight.vue';
import FlightPath from './FlightPath.ts';
import { useCheckboxInjector } from '../composables/useChecbox.ts';
import { calculateX, calculateY } from '../composables/useConvertMap.ts';
import { reactive } from 'vue';
import SHAIcon from '../assets/images/chart-icon4.png';
import PVGIcon from '../assets/images/chart-icon5.png';
import { clamp } from '@lagabu/tool';
const CONST_SCALE_DELTA = 0.1;
export default {
  name: 'Flights',
  components: {
    WorldMap,
    FirstLeft,
    FirstRight,
    SecondLeft,
    SecondRight,
    FlightPath,
  },
  props: {
    screen: {
      type: Number,
      default: 0,
    },
  },
  setup() {
    const { state, mapState, getFlightLines, mapRef } = useCheckboxInjector();
    return {
      state,
      mapState,
      getFlightLines,
      mapRef,
    };
  },
  watch: {
    screen(val, oldVal) {
      if (val === oldVal) return;
      this.updateMap();
    },
  },
  data() {
    return {
      destCoords: [
        {
          name: 'PVG',
          coords: [calculateX(121.47), calculateY(31)],
          icon: PVGIcon,
        },
        {
          name: 'SHA',
          coords: [calculateX(120.47), calculateY(31.2)],
          icon: SHAIcon,
        },
      ],
    };
  },
  computed: {
    atSecondScreen() {
      return this.screen === 1;
    },
    imageStyle() {
      let scale = 1 / this.mapState.currentScale,
        translateSize = scale * -1 * 8;
      return {
        transform: `translate(${translateSize}px, ${translateSize}px)`,
      };
    },
    imageSize() {
      let scale = 1 / this.mapState.currentScale;
      return `${scale * 16}px`;
    },
    atPvg() {
      return this.$route.path.match(/(pvg)/i);
    },
    currentContinental() {
      if (
        !this.$route.query ||
        !Object.prototype.hasOwnProperty.call(this.$route.query, 'continental')
      )
        return '';
      return this.$route.query.continental || '';
    },
  },
  mounted() {
    this.updateMap();
  },
  methods: {
    updateMap() {
      const continental = this.$route.query
        ? this.$route.query['continental'] || ''
        : '';
      this.getFlightLines(continental);
    },
    onWheelUpdate(obj) {
      if (obj.scale) {
        this.mapState.currentScale = obj.scale;
      }
    },
    backToHome() {
      this.mapState.currentNation = '';
      let to = this.$route.path.match(/(pvg)/i) ? '/pvg' : '/';
      this.$router.push(to);
    },
  },
};
</script>
